<article class="component" id="themes" data-url='theme-dark'>
  <h2 class="component-title">Night Mode</h2>
  <p class="component-description">We provide a night mod (night theme). You can add <code>.theme-dark</code> to <code>body</code> or <code>.page</code> or <code>.content</code> to enable night mode on all it's children.</p>
  <p>You can alse add <code>.theme-dark</code> to <code>.bar</code> to make the Title Bar or Toolbar to be night mode.</p>
  <p>The foreground color is white and background color is black, in night mode.</p>

  <p>Night mode is still in test. Please create an Issue on github if you find any problems.</p>

  <p>The next chapter is color theme. Color theme only chang the foreground color. You can also use color-them in <code>.theme-dark</code> to show different color.</p>
</article>

<article class="component" id="colors" data-url='colors'>
  <h2 class="component-title">Color theme</h2>
  <p class="component-description">Color theme only change the primary color. Add <code>theme-{color}</code> to <code>body</code> or <code>.page</code> or <code>.content</code> to change it's color.</p>
  <p>There are three buildin color-themes: </p>

  <ul>
    <li> <code>.theme-pink</code></li>
    <li> <code>.theme-green</code></li>
    <li> <code>.theme-yellow</code></li>
  </ul>

  <p>You can click buttons in the demo on the right to change colors.</p>

  <p>Note that the color-theme will only change the primary color, most of foreground color will not be changed.</p>

  <p>Color theme is still in test. Please create an Issue on github if you find any problems.</p>

</article>
